<template>
	<view class="header-bg"></view>
	<view class="alarm-content">
		<view class="tabbar">
			<view :class="['tabbar-item',current===0?'active':'']" @click="current=0" >Notify</view>
			<view :class="['tabbar-item',current===1?'active':'']"  @click="current=1">Alarm</view>
		</view>
		<swiper class="swiper" :indicator-dots="false" :autoplay="false" :circular="false" :current="current" @change="onSwiperChange" >
			<swiper-item>
				<notify></notify>
			</swiper-item>
			<swiper-item>
				<alarm></alarm>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import notify from './notify.vue';
	import alarm from './alarm.vue';
	const current = ref(0);
	
	const onSwiperChange = (e)=>{
		current.value = e.detail.current;
	}

</script>

<style lang="scss">
	.header-bg{
		width: 100%;
		height: 380rpx;
		background-image: linear-gradient(to bottom, #F9CFCF, #F7F0F0);
	}
	
	.alarm-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		.tabbar{
			margin-top: 112rpx;
			width: 100%;
			text-align: center;
			flex: 0 0 58rpx;
			.tabbar-item{
				display: inline-block;
				vertical-align: middle;
				width: 182rpx;
				height:58rpx;
				text-align: center;
				color: #222;
				font-size: 31.54rpx;
				line-height: 58rpx;
				&.active{
					color: #DA2407;
					position: relative;
					font-weight: 600;
					&:before{
						content: '';
						position: absolute;
						width: 18rpx;
						height: 6rpx;
						background-color: #DA2407;
						bottom:-10rpx;
						left: 82rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
		
		.tab-con{
			flex: 1;
		}
	}
	
		.swiper {
			height: 100%;
			width:100%;
			margin-top: 30rpx;
		}
</style>
